<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 300px;
				border: 1px solid #666;
				margin: 0 auto;
				text-align: center;
			}
			textarea{
				resize: none;
				width: 100%;
				border: 0;
				outline: 0;
				border-bottom: 1px solid #666;
				height: 100px;
				font-size: 35px;
			}
			button{
				width: 30%;
				height: 50px;
				margin: 2px 0px;
			}
		</style>
	</head>
	<body>
		<div>
			<textarea id="txt" readonly></textarea>
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>0</button>
			<button>.</button>
			<button>+</button>
			<button>-</button>
			<button>*</button>
			<button>/</button>
			<button>%</button>
			<button>C</button>
			<button>=</button>
		</div>
		
		<script type="text/javascript">
			var calculator={
				"buts":document.getElementsByTagName("button"),
				"txtarea":document.getElementById("txt"),
				"init":function(){
					this.bind();
				},
				"bind":function(){
					var me=this;
					for(var i=0;i<this.buts.length;i++){
						this.buts[i].onclick=function(){
							me.animation(this);
						}
					}
				},
				"animation":function(but){
					if(but.innerHTML=="C"){
						this.txtarea.innerHTML="";
					}else if(but.innerHTML=="="){
						this.txtarea.innerHTML=eval(this.txtarea.innerHTML);
					}else{
						this.txtarea.innerHTML+=but.innerHTML;
					}
				}
			}
			
			calculator.bind();
		</script>
	</body>
</html>
